/**
 * @file user-dropdown
 * @author liaoxuezhi@baidu.com
 */
/* eslint-disable */
import * as React from 'react';
import * as cx from 'classnames';
import {
  Component,
  PropTypes
} from 'react';
import * as onClickOutside from 'react-onclickoutside';
import {Link} from 'react-router';
@onClickOutside
export default class UserDropDown extends Component {
  static propTypes = {
    className: PropTypes.string,
    user: PropTypes.object.isRequired
  };
  constructor(props) {
    super(props);
    this.state = {
      open: false
    };
    this.open = this.open.bind(this);
    this.toggle = this.toggle.bind(this);
    this.close = this.close.bind(this);
    this.handleClickOutside = this.handleClickOutside.bind(this);
  }
  open() {
    this.setState({
      open: true
    });
  }
  toggle() {
    this.setState({
      open: !this.state.open
    });
  }
  close() {
    this.setState({
      open: false
    });
  }
  handleClickOutside() {
    this.close();
  }
  render() {
    const user = this.props.user;
    const open = this.state.open;
    return (
      <li className={cx('user-drop-down dropdown', {open})}>
        <a
          onClick={this.toggle}
          className="clear"
        >
          <span className="thumb-sm avatar pull-right m-t-n-sm m-b-n-sm m-l-sm">
            <img src={user.avatar || __uri('../../static/images/img2.png')} alt="..." />
          </span>
          <span className="hidden-sm hidden-md pull-left">{user.username}</span>
          <b className="caret" />
        </a>
        {open ? (
          <ul  onClick={this.close} className="dropdown-menu animated fadeIn w-xs">
            <li className="wrapper-sm visible-sm visible-md b-b m-b-sm bg-light m-t-n-xs text-ellipsis">{user.username}</li>
            <li>
              <Link to="/user/profile" activeClassName="active"><span>我的资料</span></Link>
            </li>
            <li className="divider" />
            <li>
              <a href="/logout?back=%2Flogin"><span>切换账号</span></a>
            </li>
            <li>
              <a href="/logout"><span>退出</span></a>
            </li>
          </ul>
        ) : null}
      </li>
    );
  }
}
